<template>
  <div class="yd-dialog-white-mask">
    <div class="yd-loading">
      <div class="yd-loading-icon"></div>
      <div class="yd-loading-txt" v-html="title"></div>
    </div>
  </div>
 <!-- <div class="demo-loading" style="display: ;">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      <path stroke="none" d="M3 50A47 47 0 0 0 97 50A47 49 0 0 1 3 50" fill="#bababa"
            transform="rotate(334.027 50 51)">
        <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 51;360 50 51"
                          keyTimes="0;1" dur="0.6s" begin="0s" repeatCount="indefinite"></animateTransform>
      </path>
    </svg>
    <span v-html="title"></span>
  </div>-->
</template>

<style>

  .demo-loading {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
    margin-left: -25px;
    margin-top: -25px;
    margin-bottom: 20px;
  }
  .demo-loading svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .demo-loading span {
    color: #cecece;
    font-size: 12px;
    width: inherit;
    height: inherit;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
</style>
<script type="text/babel">
  export default {
    props: {
      title: String
    }
  }
</script>
